<template>
  <div>
    <div class="columns">
      <div class="column">
        <oolongPanel style="background: rgb(51, 153, 255);">
          <div class="demo-color-name">Primary</div>
          <div class="demo-color-desc">#3399ff</div>
        </oolongPanel>
      </div>
      <div class="column">
        <oolongPanel style="background: rgb(92, 173, 255);">
          <div class="demo-color-name">Light Primary</div>
          <div class="demo-color-desc">#5cadff</div>
        </oolongPanel>
      </div>
      <div class="column">
        <oolongPanel style="background: rgb(48, 145, 242);">
          <div class="demo-color-name">Dark Primary</div>
          <div class="demo-color-desc">#3091f2</div>
        </oolongPanel>
      </div>
    </div>

    <div class="columns">
      <div class="column">
        <oolongPanel type="info" style="background: rgb(51, 153, 255);">
          <div class="demo-color-name">info</div>
          <div class="demo-color-desc">#3399ff</div>
        </oolongPanel>
      </div>
      <div class="column">
        <oolongPanel type="success" style="background: rgb(0, 204, 102);">
          <div class="demo-color-name">success</div>
          <div class="demo-color-desc">#00cc66</div>
        </oolongPanel>
      </div>
      <div class="column">
        <oolongPanel type="warning" style="background: rgb(255, 153, 0);">
          <div class="demo-color-name">warning</div>
          <div class="demo-color-desc">#ff9900</div>
        </oolongPanel>
      </div>
      <div class="column">
        <oolongPanel type="error" style="background: rgb(255, 51, 0);">
          <div class="demo-color-name">error</div>
          <div class="demo-color-desc">#ff3300</div>
        </oolongPanel>
      </div>
    </div>

  </div>
</template>
<script>
  export default{
    data(){
      return {}
    }
  }
</script>
<style lang="scss" scoped>
  .demo-color-name {
    color: #fff;
    font-size: 16px;
  }

  .demo-color-desc {
    color: #fff;
    opacity: .7;
  }
</style>
